<template>
  <h2 style="margin:10px">{{ tableDatas.title}}</h2>
  <div style="display: flex;justify-content:center;flex-direction: column">
    <div style="display: flex;justify-content:space-between">
      <div v-show="tableDatas.INBILLNO">入库单号:{{ tableDatas.INBILLNO }}</div>
      <div v-show="tableDatas.INROOM">库位:{{ tableDatas.INROOM }}</div>
      <div v-show="tableDatas.CREATETIME">创建时间:{{ tableDatas.CREATETIME }}</div>
      <div v-show="tableDatas.CREATOR">创建人:{{ tableDatas.CREATOR }}</div>
    </div>
    <table border="1">
      <thead>
        <tr>
          <th
            v-for="(column, index) in tableDatas.tableColumns"
            :key="index"
          >{{ column.label }}</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(row, rowIndex) in tableDatas.tableDatasAfterGroupby"
          :key="rowIndex"
        >
          <td
            v-for="(column, columnIndex) in tableDatas.tableColumns"
            :key="columnIndex"
          >
            {{ row[column.prop] }}
          </td>
        </tr>
      </tbody>
    </table>
    <div style="display: flex;justify-content:space-between">
      <div v-show="tableDatas.CREATOR">入库人:</div>
      <div v-show="tableDatas.CREATOR">品质:</div>
      <div v-show="tableDatas.CREATOR">仓库:</div>
      <div v-show="tableDatas.CREATOR"></div>
    </div>
  </div>
</template>
<script>
import { computed, onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import myAxios from '@/myAxios/myAxios';
import { dayjs } from 'element-plus';
export default {
  name: 'NormalRouterView',
  components: {
  },
  setup () {
    let route = useRoute();
    let loading = ref(false);

    onMounted(() => {
      console.log('route.query.applynoStr :>> ', route.query.applynoStr);
      if (route.query.applynoStr) {
        getTableDatas(route.query.applynoStr, route.query.type);
      }
    });

    let getTableDatas = function (applynoStr, type) {
      let queryName = ``;
      if (type == '1') {
        queryName = `陈帅廷查询贴片线领料单物料损耗`;
      }
      else if (type == '2') {
        queryName = `陈帅廷查询贴片线成品入库记录`;
      }

      myAxios.get(queryName, applynoStr).then(res => {
        if (res instanceof Array) {
          loading.value = false;
          tableDatas.oriTableDatas = [...res];
          if (type == '1') {
            tableDatas.title = '贴片线领料单';
            tableDatas.PC_INROOMBILLID = '';
            tableDatas.INBILLNO = '';
            tableDatas.INROOM = '';
            tableDatas.CREATETIME = '';
            tableDatas.CREATOR = '';
            tableDatas.tableColumns = [
              // { prop: "APPLYNO", label: "领料单号", align: "center" },
              // { prop: "PM_MATERIALID", label: "物料ID", align: "center" },
              { prop: "MATCODE", label: "物料编码", align: "center" },
              { prop: "MATNAME", label: "物料名称", align: "center" },
              // { prop: "QTY", label: "需求数量", align: "center" },
              // { prop: "SENDQTY", label: "已发送数量", align: "center" },
              // { prop: "NEEDSAP", label: "需求数量", align: "center" },
              // { prop: "CKQTY", label: "出库数量", align: "center" },
              // { prop: "FLQTY", label: "发料数量", align: "center" },
              // { prop: "TKQTY", label: "退库数量", align: "center" },
              { prop: "SHQTY", label: "损耗数量", align: "center" },
            ];



          }
          else if (type == '2') {
            tableDatas.title = '贴片线成品入库单';
            tableDatas.PC_INROOMBILLID = res[0].PC_INROOMBILLID;
            tableDatas.INBILLNO = res[0].INBILLNO;
            tableDatas.INROOM = res[0].INROOM;
            tableDatas.CREATETIME = dayjs(res[0].CREATETIME).format('YYYY/MM/DD HH:mm:ss');
            tableDatas.CREATOR = res[0].CREATOR;
            tableDatas.tableColumns = [
              // {
              //   prop: 'PC_INROOMBILLID',
              //   label: '入库单ID',
              //   align: 'center'
              // },
              // {
              //   prop: 'INBILLNO',
              //   label: '入库单号',
              //   align: 'center'
              // },
              // {
              //   prop: 'INROOM',
              //   label: '入库库位',
              //   align: 'center'
              // },
              // {
              //   prop: 'CREATETIME',
              //   label: '创建时间',
              //   align: 'center'
              // },
              // {
              //   prop: 'CREATOR',
              //   label: '创建人',
              //   align: 'center'
              // },
              {
                prop: 'ORDERNO',
                label: '订单号',
                align: 'center'
              },
              {
                prop: 'MATCODE',
                label: '物料编码',
                align: 'center'
              },
              {
                prop: 'MATNAME',
                label: '物料名称',
                align: 'center'
              },
              {
                prop: 'ACTQTY',
                label: '计划入库数量',
                align: 'center'
              },
            ];
          }

          // tableDatas.oritableData = [...res, ...res, ...res, ...res, ...res, ...res];
          ElMessage({
            showClose: true,
            type: 'success',
            message: '数据获取成功!'
          });
        }
        else {
          loading.value = false;
          showWarning('获取数据失败res!' + res);
        }
      }).catch((err) => {
        loading.value = false;
        showWarning('获取数据失败err!' + err);
      });
    };

    let tableDatas = reactive({
      tableColumns: [
        // { prop: "APPLYNO", label: "领料单号", align: "center" },
        // { prop: "PM_MATERIALID", label: "物料ID", align: "center" },
        { prop: "MATCODE", label: "物料编码", align: "center" },
        { prop: "MATNAME", label: "物料名称", align: "center" },
        // { prop: "QTY", label: "需求数量", align: "center" },
        // { prop: "SENDQTY", label: "已发送数量", align: "center" },
        // { prop: "NEEDSAP", label: "需求数量", align: "center" },
        // { prop: "CKQTY", label: "出库数量", align: "center" },
        // { prop: "FLQTY", label: "发料数量", align: "center" },
        // { prop: "TKQTY", label: "退库数量", align: "center" },
        { prop: "SHQTY", label: "损耗数量", align: "center" },
      ],
      oriTableDatas: [{
        APPLYNO: '202409260032',
        PM_MATERIALID: '001',
        MATCODE: 'A001',
        MATNAME: '物料A',
        QTY: 100,
        SENDQTY: 50,
        NEEDSAP: 50,
        CKQTY: 30,
        FLQTY: 20,
        TKQTY: 10,
        SHQTY: 20
      },
      {
        APPLYNO: '202409270010',
        PM_MATERIALID: '002',
        MATCODE: 'B002',
        MATNAME: '物料B',
        QTY: 200,
        SENDQTY: 100,
        NEEDSAP: 100,
        CKQTY: 60,
        FLQTY: 40,
        TKQTY: 20,
        SHQTY: 20
      }],
      tableDatasAfterGroupby: computed(() => {
        if (tableDatas.PC_INROOMBILLID) {
          return tableDatas.oriTableDatas;
        }
        let fData = JSON.parse(JSON.stringify(tableDatas.oriTableDatas));
        //用PM_MATERIALID,MATCODE,MATNAME进行GROUPBY,把其他的值加起来,用新arr来接
        let newArr = [];
        fData.forEach(el => {
          let groupbyKey = el.PM_MATERIALID + el.MATCODE + el.MATNAME;
          let groupbyObj = newArr.find(el2 => el2.groupbyKey == groupbyKey);
          if (groupbyObj) {
            groupbyObj.QTY += el.QTY;
            groupbyObj.SENDQTY += el.SENDQTY;
            groupbyObj.NEEDSAP += el.NEEDSAP;
            groupbyObj.CKQTY += el.CKQTY;
            groupbyObj.FLQTY += el.FLQTY;
            groupbyObj.TKQTY += el.TKQTY;
            groupbyObj.SHQTY += el.SHQTY;
          }
          else {
            let newObj = {
              ...el,
              groupbyKey: groupbyKey
            };
            newArr.push(newObj);
          }
        });
        //去掉没有损耗数量的
        newArr = newArr.filter(el => el.SHQTY > 0);
        return newArr;
      }),

      title: '贴片线退料单',
      PC_INROOMBILLID: '202409260032',
      INBILLNO: '202409260032',
      INROOM: 'A001',
      CREATETIME: dayjs().format('YYYY/MM/DD HH:mm:ss'),
      CREATOR: '1',

    });

    return {
      loading,
      tableDatas,
      routers: route.meta.routers,
    };
  }
}
</script>

<style>
</style>